<template>
  <transition name="modal-fade">
    <div
      v-if="visible"
      class="fixed inset-0 bg-black/50 backdrop-blur-sm flex items-center justify-center z-50 p-4"
      @click.self="closeModal"
    >
      <div class="bg-white rounded-2xl shadow-2xl w-full max-w-6xl overflow-hidden">
        <!-- 头部 -->
        <div class="bg-green-50 px-6 py-4 flex items-center justify-between border-b border-green-200">
          <h2 class="text-lg font-semibold text-green-800 flex items-center">
            <i class="fas fa-calendar-plus mr-3 text-green-600"></i>
            创建新的社区活动
          </h2>
          <button
            @click="closeModal"
            class="text-green-500 hover:text-green-700 transition-colors p-2 rounded-full hover:bg-green-100"
            aria-label="关闭"
          >
            <i class="fas fa-times text-lg"></i>
          </button>
        </div>

        <!-- 表单主体 -->
        <form @submit.prevent="handleSubmit" class="p-6 grid grid-cols-1 lg:grid-cols-5 gap-x-8">
          <!-- 左侧：主要信息输入 -->
          <div class="lg:col-span-3 space-y-4 flex flex-col">
            <div>
              <label class="text-sm font-medium text-gray-700 mb-1.5 block">
                活动名称 <span class="text-red-500">*</span>
              </label>
              <input
                v-model="form.title"
                type="text"
                required
                placeholder="例如：端午节包粽子大赛"
                class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-green-300 focus:border-green-400 transition-all text-base"
              >
            </div>
            <div class="flex-grow flex flex-col">
              <label class="text-sm font-medium text-gray-700 mb-1.5 block">
                活动简介 <span class="text-red-500">*</span>
              </label>
              <textarea
                v-model="form.description"
                rows="4"
                required
                placeholder="请简要描述活动内容、目的和亮点..."
                class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-green-300 focus:border-green-400 text-base resize-none flex-grow"
              ></textarea>
            </div>
             <div class="flex-grow flex flex-col">
              <label class="text-sm font-medium text-gray-700 mb-1.5 block">
                活动详情 <span class="text-red-500">*</span>
              </label>
              <textarea
                v-model="form.details"
                rows="6"
                required
                placeholder="请详细说明活动流程、安排、具体内容等..."
                class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-green-300 focus:border-green-400 text-base resize-none flex-grow"
              ></textarea>
            </div>
          </div>

          <!-- 右侧：属性和设置 -->
          <div class="lg:col-span-2 space-y-4 mt-4 lg:mt-0">
            <div class="grid grid-cols-2 gap-x-4 gap-y-4">
              <div>
                <label class="text-sm font-medium text-gray-700 mb-1.5 block">活动类型</label>
                <div class="relative">
                  <select
                    v-model="form.type"
                    class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-green-300 focus:border-green-400 appearance-none text-base bg-white"
                  >
                    <option value="线下">线下活动</option>
                    <option value="线上">线上活动</option>
                    <option value="混合">线上线下混合</option>
                  </select>
                  <div class="absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none">
                    <i class="fas fa-chevron-down text-gray-400"></i>
                  </div>
                </div>
              </div>
              <div>
                <label class="text-sm font-medium text-gray-700 mb-1.5 block">活动分类</label>
                <div class="relative">
                  <select
                    v-model="form.category"
                    class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-green-300 focus:border-green-400 appearance-none text-base bg-white"
                  >
                    <option value="文娱">文娱活动</option>
                    <option value="体育">体育活动</option>
                    <option value="教育">教育活动</option>
                    <option value="公益">公益活动</option>
                    <option value="节日">节日庆典</option>
                  </select>
                   <div class="absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none">
                    <i class="fas fa-chevron-down text-gray-400"></i>
                  </div>
                </div>
              </div>
            </div>

            <div>
              <label class="text-sm font-medium text-gray-700 mb-1.5 block">
                活动地点 <span class="text-red-500">*</span>
              </label>
              <input
                v-model="form.location"
                type="text"
                required
                placeholder="例如：社区活动中心一楼"
                class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-green-300 focus:border-green-400 text-base"
              >
            </div>

            <div class="grid grid-cols-2 gap-4">
               <div>
                <label class="text-sm font-medium text-gray-700 mb-1.5 block">开始时间 <span class="text-red-500">*</span></label>
                <input
                  v-model="form.startTime"
                  type="datetime-local"
                  required
                  class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-green-300 focus:border-green-400 text-base"
                >
              </div>
              <div>
                <label class="text-sm font-medium text-gray-700 mb-1.5 block">结束时间 <span class="text-red-500">*</span></label>
                <input
                  v-model="form.endTime"
                  type="datetime-local"
                  required
                  class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-green-300 focus:border-green-400 text-base"
                >
              </div>
            </div>

             <div>
                <label class="text-sm font-medium text-gray-700 mb-1.5 block">报名截止</label>
                <input
                  v-model="form.registrationDeadline"
                  type="datetime-local"
                  class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-green-300 focus:border-green-400 text-base"
                >
              </div>

            <div class="grid grid-cols-2 gap-4">
              <div>
                <label class="text-sm font-medium text-gray-700 mb-1.5 block">活动费用</label>
                <div class="relative">
                  <input
                    v-model.number="form.fee"
                    type="number"
                    min="0"
                    placeholder="免费请留空"
                    class="w-full px-3 py-2 pl-7 border border-gray-300 rounded-lg focus:ring-2 focus:ring-green-300 focus:border-green-400 text-base"
                  >
                  <span class="absolute left-3 top-1/2 -translate-y-1/2 text-gray-500 text-base">¥</span>
                </div>
              </div>

              <div>
                <label class="text-sm font-medium text-gray-700 mb-1.5 block">最大人数</label>
                <input
                  v-model.number="form.maxParticipants"
                  type="number"
                  min="1"
                  placeholder="不限请留空"
                  class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-green-300 focus:border-green-400 text-base"
                >
              </div>
            </div>

            <div>
              <label class="text-sm font-medium text-gray-700 mb-1.5 block">主办方</label>
              <input
                v-model="form.organizer"
                type="text"
                placeholder="例如：社区居委会"
                class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-green-300 focus:border-green-400 text-base"
              >
            </div>

             <div>
              <label class="text-sm font-medium text-gray-700 mb-1.5 block">注意事项</label>
              <textarea
                v-model="form.notes"
                rows="2"
                placeholder="如着装要求、携带物品等..."
                class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-green-300 focus:border-green-400 text-base resize-none"
              ></textarea>
            </div>
          </div>

          <!-- 操作按钮 -->
          <div class="lg:col-span-5 flex justify-end space-x-4 pt-5 border-t border-gray-200 mt-5">
            <button
              type="button"
              @click="closeModal"
              class="px-6 py-2 border border-gray-300 rounded-lg text-gray-700 bg-white hover:bg-gray-100 transition-colors text-base font-medium"
            >
              取消
            </button>
            <button
              type="submit"
              class="px-6 py-2 bg-green-500 hover:bg-green-600 text-white rounded-lg transition-all text-base font-medium shadow-md hover:shadow-lg"
            >
              <i class="fas fa-paper-plane mr-2"></i>
              立即发布
            </button>
          </div>
        </form>
      </div>
    </div>
  </transition>
</template>

<script>
export default {
  name: 'EventFormModal',
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    communityId: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      form: {
        title: '',
        type: '线下',
        category: '文娱',
        startTime: '',
        endTime: '',
        registrationDeadline: '',
        location: '社区活动中心',
        maxParticipants: null,
        fee: null,
        organizer: '社区管理员',
        description: '',
        details: '',
        notes: '',
        coverImage: 'https://picsum.photos/id/225/600/400',
        status: '报名中'
      }
    }
  },
  watch: {
    visible(newVal) {
      if (!newVal) {
        this.resetForm()
      }
    }
  },
  methods: {
    handleSubmit() {
      if (!this.validateForm()) {
        return
      }

      const event = {
        ...this.form,
        id: Date.now(),
        currentParticipants: 0,
        communityId: this.communityId
      }
      this.$emit('submit', event)
      this.resetForm()
      this.$emit('close')
    },
    resetForm() {
      this.form = {
        title: '',
        type: '线下',
        category: '文娱',
        startTime: '',
        endTime: '',
        registrationDeadline: '',
        location: '社区活动中心',
        maxParticipants: null,
        fee: null,
        organizer: '社区管理员',
        description: '',
        details: '',
        notes: '',
        coverImage: 'https://picsum.photos/id/225/600/400',
        status: '报名中'
      }
    },
    validateForm() {
      // 验证必填字段
      const requiredFields = ['title', 'startTime', 'endTime', 'location', 'description', 'details']
      for (const field of requiredFields) {
        if (!this.form[field]) {
          alert(`请填写${this.getFieldName(field)}`)
          return false
        }
      }

      // 验证时间有效性
      if (new Date(this.form.startTime) >= new Date(this.form.endTime)) {
        alert('结束时间必须晚于开始时间')
        return false
      }

      // 验证报名截止时间
      if (this.form.registrationDeadline &&
          new Date(this.form.registrationDeadline) > new Date(this.form.startTime)) {
        alert('报名截止时间不能晚于活动开始时间')
        return false
      }

      return true
    },
    getFieldName(field) {
      const names = {
        title: '活动名称',
        startTime: '开始时间',
        endTime: '结束时间',
        location: '活动地点',
        description: '活动简介',
        details: '活动详情'
      }
      return names[field] || field
    },
    closeModal() {
      this.resetForm()
      this.$emit('close')
    }
  }
}
</script>

<style scoped>
/* 优化输入框焦点样式 */
input:focus, textarea:focus, select:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(134, 239, 172, 0.2);
}

/* 按钮悬浮效果 */
button:hover {
  transform: translateY(-2px);
  transition: all 0.2s ease-in-out;
}

.modal-fade-enter-active .bg-white,
.modal-fade-leave-active .bg-white {
  transition: transform 0.3s ease-out;
}

.modal-fade-enter-from .bg-white {
  transform: translateY(-20px);
}

.modal-fade-leave-to .bg-white {
  transform: translateY(20px);
}
</style>